<template>
  <uni-nav-bar title="加注订单" left-icon="left" @clickLeft="redirectTo('index/mine')" :fixed="true" statusBar></uni-nav-bar>
  <environment></environment>
  <!-- 分类 -->
  <view class="filling">
    <view class="filling_center">
      <view class="datas">
        <uni-datetime-picker
          v-model="range"
          type="daterange"
          :border="false"
          :clear-icon="false"
          rangeSeparator="至"
          @change="change"
        />
      </view>
      <!-- <view class="screen" @click="screen">筛选</view> -->
    </view>
    <view class="filling_bottom">
      <text>合计:{{ count }}公斤</text>
      <text>金额:￥{{ price }}</text>
      <!-- <view class="filling_bottoms" v-if="carIDC" @click="delCar()">
        <text>{{ carIDC }}</text>
        <uni-icons type="closeempty" color="#666" size="18" style="margin-left: 10rpx"></uni-icons>
      </view> -->
    </view>
  </view>
  <!-- 列表 -->
  <scroll-view
    scroll-y="true"
    enable-back-to-top
    @scrolltolower="loadMore"
    class="scroll-box"
    :style="{ height: pageHeight + 'px' }"
  >
    <FillingList :orderLists="orderLists" :status="true"></FillingList>
    <!-- <uni-load-more v-if="hasOrders" :status="loadStatus" color="#ccc"></uni-load-more> -->
    <view v-if="!hasOrders" class="fillings" :style="{ height: pageHeight + 'px' }">
      <image :src="Empty2"></image>
      <text>暂无订单</text>
    </view>
  </scroll-view>
  <!-- 车辆选择 -->
  <uni-popup ref="popup" type="right" background-color="#fff">
    <view class="propos" style="width: 670rpx;">
      <scroll-view scroll-y="true" :style="{height:'81.5vh',marginTop:isH5?'5vh':'8vh'}">
        <view class="scroll">
          <view
            class="scrolls"
            v-for="item in carLists"
            :key="item.id"
            @click.stop="addCarBy(item.cart_code)"
            :style="{ borderColor: carIDC == item.cart_code ? '#399FFF' : '' }"
          >
            <text :style="{ color: carIDC == item.cart_code ? '#399FFF' : '' }">{{ item.cart_code }}</text>
            <view class="scrolla" :style="{ display: carIDC == item.cart_code ? 'flex' : 'none' }">
              <uni-icons type="checkmarkempty" size="15" color="#fff"></uni-icons>
            </view>
          </view>
          <view class="scrolle" v-if="carLists.length < 1">
            <image :src="Empty1"></image>
            <text>暂无车辆信息</text>
          </view>
        </view>
      </scroll-view>
      <view class="propos_bottom">
        <text @click="Reset()">重置</text>
        <text @click="sureCar()">确定</text>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { carListOrder } from '@/gql/carAuthorized';
import environment from '@c/pobulic/environment.vue';
import { fillingOrder } from '@/gql/filling';
import { getDriverID } from '@/stores/driverID';
import { redirectTo } from '@/utils/navigator';
import { errorToast, showToast } from '@/utils/prompt';
import FillingList from '@c/order/fillingList.vue';
import { toPublish } from '@mqtt';
import { format, subDays } from 'date-fns';
import { computed, onMounted, ref } from 'vue';
import { isH5 } from '@/utils/platform';
import { Empty1,Empty2 } from '@/utils/Static';
/**
 * 加注订单主页
 * @param driver_id  用户ID
 * @param orderLists  加注订单列表
 * @param hasOrders  是否显示空状态
 * @param carLists  车牌号列表
 * @param count  合计公斤数
 * @param price  合计加注金额
 * @param carIDC  选中赛选的车牌号
 * @param pageHeight  加注订单列表高度
 * @param isLoading  上啦加载状态
 * @param lastPage  加注订单的总页数
 * @param currentPage  获取当前页数数据
 * @param popup  车辆选择弹框
 */

// static
const driver_id = getDriverID();
const orderLists = ref([]);
const hasOrders = computed(() => orderLists.value.length > 0);
const carLists = ref([]);
const count = ref('');
const price = ref('');
const carIDC = ref('');
const pageHeight = ref('');
// data
const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range = ref([start, end]);

const isLoading = ref(false);
const lastPage = ref(1);
const currentPage = ref(1);
// refs
const popup = ref(null);
onMounted(() => {
  const num = isH5 ? 140 : 180;
  uni.getSystemInfo({
    success: function(res) {
      pageHeight.value = (res.windowHeight - num).toString();
    },
  });
});
init();
carFInfor();
/**
 * 初始化获取加注订单列表
 * @param driver_id  用户ID
 * @param page  获取当前页加注数据
 * @param start  开始时间
 * @param end  结束时间
 * @param cart_code  赛选的车牌号
 * @param from_driver_id  赛选来自好友的加注订单
 */
function init() {
  isLoading.value = true;
  const payload = {
    query: fillingOrder,
    variables: {
      page: currentPage.value,
      start,
      end,
      cart_code: carIDC.value,
      from_driver_id: 0,
      driver_id,
    },
  };
  toPublish(
    'ql/driver/getOrderList',
    payload,
    (obj: any) => {
      const { fill_order_list } = obj.data;
      isLoading.value = false;
      orderLists.value = [...orderLists.value, ...fill_order_list.list];
      lastPage.value = fill_order_list.lastpage;
      count.value = fill_order_list.count;
      price.value = fill_order_list.price;
    }
  );
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    init();
  }
}
/**
 * 赛选时间段
 * @param currentPage  当前获取加注页数
 * @param orderLists  清空加注订单列表
 * @param start  赛选开始时间
 * @param end  赛选结束时间
 * @return 再次获取加注订单
 */
function change([sta, en]) {
  currentPage.value = 1;
  orderLists.value = [];
  start = sta;
  end = en;
  init();
}
/**
 * 车牌号列表
 * @param driver_id  用户ID
 * @param carLists  车牌号列表
 */
function carFInfor() {
  const payload = {
    query: carListOrder,
    variables: { driver_id },
  };
  toPublish('ql/driver/orderCartList', payload, (obj: any) => {
    const { order_cart_list } = obj.data;
    carLists.value = order_cart_list;
  });
}
/**
 * 打开车牌列表弹框
 */
function screen() {
  popup.value.open();
}
/**
 * 清除筛选车牌号
 */
function Reset() {
  carIDC.value = '';
}
/**
 * 选中赛选的车牌按钮
 * @param {Object} num 车牌号
 */
function addCarBy(num) {
  carIDC.value = num;
}
/**
 * 确认选中车牌号
 * @param currentPage 当前页数
 * @param orderLists 清空加注订单
 * @return 再次获取加注订单
 */
function sureCar() {
  if (!carIDC.value) {
    showToast('请选择您要查询的车牌');
    return;
  }
  popup.value.close();
  // 获取页面信息
  currentPage.value = 1;
  orderLists.value = [];
  init();
}
/**
 * 删除选中的车牌号
 */
function delCar() {
  carIDC.value = '';
  // 获取页面信息
  currentPage.value = 1;
  orderLists.value = [];
  init();
}
</script>

<style scoped lang="less">
@import url('../order/less/fillingOrder.less');
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
